<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card style="height: 400px; padding: 30px 0; margin-bottom: 30px">
          <div id="live"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card style="padding-bottom:20px;">
          <h3>商品详情</h3>
          <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'age', order: 'descending' }"
          >
            <el-table-column prop="id" label="商品" align="center">
            </el-table-column>
            <el-table-column prop="age" label="上|下架时间" sortable align="center">
            </el-table-column>
            <el-table-column prop="name" label="讲解时常" sortable align="center">
            </el-table-column>
            <el-table-column prop="address" label="上|下架销量" align="center">
            </el-table-column>
            <el-table-column prop="address" label="优惠价" align="center">
            </el-table-column>
            <el-table-column prop="address" label="预估销量" align="center">
            </el-table-column>
            <el-table-column prop="address" label="预估销售额" align="center">
            </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                <img :src="scope.row.ImageUrl" style="height: 50px"/>
                <span>这是图片</span>
                </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="12"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
            </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "渐变堆叠面积图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: "Line 2",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: "Line 3",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: "Line 4",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgba(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: "Line 5",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      },
      tableData:[
          {id:1,age:20,name:'jack',address:'江西',ImageUrl:'../assets/imgs/s1.jpg'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'}
      ]
    };
  },
  mounted() {
    var live = echarts.init(document.getElementById("live"));
    live.setOption(this.option);
  },
  methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>
<style scoped>
#live {
  height: 400px;
  padding: 0 30px;
}
.el-pagination{
    float:right;
    margin:20px 30px 0 0;
}
</style>